<template>
    <div>
    <mt-header title="泊寓- 注册" style="background-color:#f4b06d">
        <router-link slot="left" icon="back" to="/">首页</router-link>
        
        <router-link slot="left" icon="back" to="/user">&#32 返回</router-link>
        <router-link  slot="right" to="/login">登录</router-link>
    </mt-header>
    <mt-field
        type="text"
        label="用户名:"
        placeholder="请输入用户名"
        v-model="username"
        @blur.native.capture="checkUsername"
        :state="usernameState"
    ></mt-field>
    
    <mt-field
        type="password"
        label="密码:"
        placeholder="请输入密码"
        v-model="pwd"
        :state="pwdState"
        @blur.native.capture="checkPwd"
        
    ></mt-field>
    <mt-field
        type="password"
        label="确认密码:"
        placeholder="请再次输入密码"
        v-model="repwd"
         :state="repwdState"
        @blur.native.capture="checkRepwd"
    ></mt-field>
    <mt-button class="mtButton" @click="checkForm" type="primary" size="large">免费注册</mt-button>
    </div>
</template>
<script>

export default {
    data(){
        return{
            username:'',
            usernameState:'',
            pwd:'',
            pwdState:'',
            repwd:'',
            repwdState:''

        }
        
    },
    
    methods:{
        // 验证表单, 点击按钮后触发
        checkUsername(){
            //验证用户名
            let username =this.username;
            let reg=/^\w{6,12}$/;
            if(reg.test(username)){
               //true 验证成功
               this.usernameState='success';
               return true;
               console.log('success...')
            }else{
               this.usernameState='error';
               return false;
               console.log('fail...')
            }

        },
        
        checkPwd(){
            //验证密码
            let reg=/^\d{6}$/;
            if(reg.test(this.pwd)){
                //true 密码正确
                this.pwdState='success';
                return true;
                console.log('密码格式输入正确')
            }else{
                this.pwdState='error';
                return false;
                console.log('密码格式输入错误')
            }

        },
        checkRepwd(){
             let reg=/^\d{6}$/;
            if(reg.test(this.repwd) && this.pwd ==this.repwd){
                //true 密码正确
                this.repwdState='success';
                return true;
                console.log('密码格式输入正确')
            }else{
                this.repwdState='error';
                return false;
                console.log('密码格式输入错误')
            }

        },


        //
        checkForm(){
            if(this.checkUsername() &&
            this.checkPwd()&& //所有组件验证成功
            this.checkRepwd()){
                let url='/register';
                let param=
                `username=${this.username}&password=${this.pwd}`;
                this.axios.post(url,param).then(result=>{
                    console.log(result);
                    if(result.data.code==200){//注册成功
                       this.$toast({
                            message:'注册成功',
                            position:'center',//bottom
                            duration:3000
                            })
                        this.$router.push('/login');
                    }else{//注册失败
                        // 在main.js引入MintUI时，执行Vue.use(MintUI)
                        // 在MintUI的install方法内部：
                        // Vue.prototype.$messagebox = Messagebox
                        this.$messagebox('提示信息', '用户已存在')
                        }
                    })

            }else{ // 其中有格式错误的组件
               
            }
        }
    }
}


</script>
<style scoped>
    .mtButton{ background-color:#f4b06d

    }
</style>
